<template>
	<div class="dashboard-permission-wrapper">
		<a-spin :spinning="loading" tip="正在加载仪表盘...">
			<!-- 无可访问仪表盘 -->
			<div v-if="!loading && accessibleDashboards.length === 0" class="no-dashboard-container">
				<a-empty description="暂无可展示的仪表盘">
					<template #image>
						<!--						<a-icon style="font-size: 64px; color: #d9d9d9" type="dashboard" />-->
					</template>
					<div class="empty-actions">
						<a-button type="primary" @click="handleRefresh">刷新</a-button>
					</div>
				</a-empty>
			</div>

			<!-- 单个仪表盘直接展示 -->
			<div v-else-if="!loading && accessibleDashboards.length === 1" class="single-dashboard-container">
				<dashboard-show :dashboard-detail="accessibleDashboards[0]" :dashboard-id="accessibleDashboards[0].id" />
			</div>

			<!-- 多个仪表盘显示选择器 -->
			<div v-else-if="!loading && accessibleDashboards.length > 1" class="multiple-dashboard-container">
				<div style="width: auto; position: absolute; z-index: 1">
					<a-select
						v-model:value="selectedDashboardId"
						placeholder="请选择要查看的仪表盘"
						@change="handleDashboardChange"
					>
						<a-select-option v-for="dashboard in accessibleDashboards" :key="dashboard.id" :value="dashboard.id">
							{{ dashboard.name }}
						</a-select-option>
					</a-select>
					<a-button type="link" @click="handleRefresh">
						<template #icon>
							<ReloadOutlined />
						</template>
						刷新
					</a-button>
				</div>

				<!--				<div class="dashboard-selector-header">
					<a-select
						v-model:value="selectedDashboardId"
						placeholder="请选择要查看的仪表盘"
						style="width: 300px"
						@change="handleDashboardChange"
					>
						<a-select-option v-for="dashboard in accessibleDashboards" :key="dashboard.id" :value="dashboard.id">
							{{ dashboard.name }}
						</a-select-option>
					</a-select>
					<a-button type="link" @click="handleRefresh">
						<template #icon>
							<ReloadOutlined />
						</template>
						刷新
					</a-button>
				</div>-->

				<div v-if="selectedDashboard" class="dashboard-content">
					<dashboard-show :dashboard-detail="selectedDashboard" :dashboard-id="selectedDashboard.id" />
				</div>

				<div v-else class="select-prompt">
					<a-empty description="请选择一个仪表盘进行查看" />
				</div>
			</div>
		</a-spin>
	</div>
</template>

<script name="dashboardPermissionWrapper" setup>
	import { computed, onMounted, ref } from 'vue'
	import { message } from 'ant-design-vue'
	import { ReloadOutlined } from '@ant-design/icons-vue'
	import { getUserAccessibleDashboards } from '@/views/plugin/dashboard/api/dashboardApi'
	import DashboardShow from './dashboardShow.vue'

	// 响应式数据
	const loading = ref(false)
	const accessibleDashboards = ref([])
	const selectedDashboardId = ref(null)

	// 计算属性
	const selectedDashboard = computed(() => {
		return accessibleDashboards.value.find((dashboard) => dashboard.id === selectedDashboardId.value)
	})

	// 加载用户可访问的仪表盘列表
	const loadAccessibleDashboards = async () => {
		loading.value = true
		try {
			const response = await getUserAccessibleDashboards()
			accessibleDashboards.value = response || []

			// 如果只有一个仪表盘，自动选中
			if (accessibleDashboards.value.length === 1) {
				selectedDashboardId.value = accessibleDashboards.value[0].id
			}
			// 如果有多个仪表盘，默认选中第一个
			else if (accessibleDashboards.value.length > 1) {
				selectedDashboardId.value = accessibleDashboards.value[0].id
			}
		} catch (error) {
			console.error('加载可访问仪表盘失败:', error)
			message.error('加载仪表盘失败，请稍后重试')
		} finally {
			loading.value = false
		}
	}

	// 处理仪表盘切换
	const handleDashboardChange = (dashboardId) => {
		selectedDashboardId.value = dashboardId
	}

	// 刷新数据
	const handleRefresh = () => {
		loadAccessibleDashboards()
	}

	// 组件挂载时加载数据
	onMounted(() => {
		loadAccessibleDashboards()
	})

	// 暴露方法供父组件调用
	defineExpose({
		refresh: handleRefresh,
		loadAccessibleDashboards
	})
</script>

<style lang="less" scoped>
	.dashboard-permission-wrapper {
		min-height: 400px;

		.no-dashboard-container {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 400px;

			.empty-actions {
				margin-top: 16px;
			}
		}

		.single-dashboard-container {
			width: 100%;
		}

		.multiple-dashboard-container {
			.dashboard-selector-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px;
				background: #fafafa;
				border-radius: 2px;

				.ant-select {
					flex: 1;
					max-width: 300px;
				}
			}

			.dashboard-content {
				width: 100%;
			}

			.select-prompt {
				display: flex;
				align-items: center;
				justify-content: center;
				min-height: 300px;
			}
		}
	}
</style>
